<template>
    <div class="page rdsp-fix-botttom-page relatedAssets-page"
    data-page="relatedEquipment" style="z-index: 2;">
         <div class="link-page-nav" style="margin-left: -10px">
            <a href="#" class="link" @click="$root.backToTab()"> 
                <i class="iconfont icon-zuo"></i>
            </a>
        </div>
        <div class="page-title">物联设备</div>
        <div class="link-page-search">
            <div class="link-page-search-input" style="width:60%;margin-left: 85px">
                <i class="iconfont icon-APPicon_sousuo1"></i>    
                <input type="text" placeholder="搜一搜" id="assets_list_search">
            </div>
            <a class="link popover-open" data-popover="#assets_menu" style="margin-top: 10px">
                <i class="iconfont icon-APPicon_shaixuan1
" id="active" style="font-size:24px"></i>
            </a>
        </div><div data-infinite-distance="50" class="page-content infinite-scroll-content ptr-content" 
        @infinite="loadMoreHistoryList" 
        @ptr:refresh="refreshHistoryPolice">
            <div class="ptr-preloader" style="top: -50px;">
                <div class="preloader color-multi"></div>
                <div class="ptr-arrow"></div>
            </div>
            <div class="list media-list dslist" id="dslist" style="overflow: auto;-webkit-overflow-scrolling: touch;overflow-y: scroll;" id="historyPolice_list">
                <ul></ul>
            </div>
            <div id="history_preloader" class="preloader infinite-scroll-preloader"></div>
        </div>
        <button class="col button button-big button-raised hwy" style="color: white;background: linear-gradient(to top, #378bf6 , #378bf6 );margin-top: 10px;" @click="equipmentbutton" id="equipmentbutton">确定</button>
        <div class="popover select-option-con" id="assets_menu">
                <div class="popover-angle"></div>
                <div class="popover-inner">
                <div class="list">
                    <ul>
                        <li><a href="" class="list-button item-link popover-close" id="troubleBulid" @click="troublebulid">全部区域</a></li>
                        <li><a href="" class="list-button item-link popover-close" id="dector_type">设备类别</a></li>
                        <li><a href="" class="list-button item-link popover-close removeScreen select-active" @click="removeScreen" >清&nbsp&nbsp&nbsp&nbsp&nbsp空</a></li>
                    </ul>
                </div>
            </div>
        </div>
    </div>
</template>
<script>
    return{
        mounted() {
            var self = this;
            var app = self.$app;
            //页面传参
            self.currentOrgId = this.$route.params.chargeCompany;
            self.chargeBuildId = this.$route.params.chargeBuildId;
            self.buildName = this.$route.params.buildName;
            // self.systemId="-1";
        },
        data:function(){
            return{
                currentOrgId: 0,
                firettype: 0,
                fireTType: 0,
                decterSystemId: -1,
                chargeBuildId: 0,
                allowInfinite: true,
                fcfCategoryId:-1,//设备类别-1;
                listIndex: 0,
                listSize: 25,
                selectContent:'',
                selectOptionOrg : "",
                selectOptionDec : "",
                nineFcfId:"",
                buildName:"",
            }
        },

        methods:{
            // 上拉加载
            loadMoreHistoryList: function () {
            var self = this;
            if (!self.allowInfinite) return;
            self.allowInfinite = false;
            setTimeout(function () {
                self.listIndex++;
                self.getmoreDectorStateData();
            }, 1000);
            },
            // 下拉刷新
            refreshHistoryPolice: function (e, done) {
                if (done && e) {
                    var self = this;
                    var $ = self.$$;
                    setTimeout(function () {
                        self.reInit();
                        $('#history_preloader').hide();
                        self.getmoreDectorStateData();
                        done();
                    }, 1000);
                }
            },
            //列表数据
            getmoreDectorStateData: function () {
                var self = this;
                var $ = self.$$;
                //筛选按钮有值变色
                if(jQuery("#dector_type")[0].innerText != "设备类别" || jQuery("#troubleBulid")[0].innerText != "全部区域"){
                   jQuery("#active").addClass("select-active");
                }else{
                    jQuery("#active").removeClass("select-active");
                }
                Dao.getmoreDectorStateList({
                    fcfCategoryId: self.fcfCategoryId,
                    orgIds: self.currentOrgId,
                    systemId: self.decterSystemId,
                    fbsId: self.chargeBuildId,
                    fireTType: -1,
                    queryType:1,
                    pageIndex: self.listIndex,
                    pageSize: self.listSize,
                    name:self.selectContent,
                    fcfId:self.nineFcfId,
                }, function (data,total) {
                    if(self.listIndex==0){
                        $("#dslist ul").empty();
                    }
                    var datalist = data;
                    var dealResultHtml='';
                    if (datalist&&datalist.length > 0) {
                        if (self.listSize * self.listIndex + data.length < total) { //没分页
                            $("#history_preloader").show();
                            self.allowInfinite = true;
                        } else {  //有分页
                            $("#history_preloader").hide();
                            self.allowInfinite = false;
                        }
                        if (datalist.length > 0) {
                            for (var i = 0; i < datalist.length; i++) {
                                var dataFireType=datalist[i].fireTType;
                                $("#dslist ul").append(`
                                <li style="border-bottom: 1px solid rgba(51, 51, 51, 0.05);margin-bottom: 20px;padding-left:10px" id="SSN`+datalist[i].fcFacilitiesId+`">
                                    <input type="radio" name="relatedEquipment" class="radio_type" id="idinput`+datalist[i].fcFacilitiesId+`" data-id="${datalist[i].fcFacilitiesId}" data-name="${datalist[i].fcFacilitiesName}">
                                    <div class="decter-stuts-con" style="margin-left:35px;">
                                        <span class='left'>
                                            <i id="fireType-`+datalist[i].fcFacilitiesId+`" class="iconfont `+transNewFireIcon(datalist[i].fireTType)+`" style="color:`+transFireColor(dataFireType)+`"></i>
                                            `+transFireColorText(dataFireType)+dealResultHtml+ `
                                        </span>
                                    </div>
                                    <a id="jump_to_eqmentMsg_`+datalist[i].fcFacilitiesId+`" class="item-link item-content" data-view=".view-main" style="margin-left:19px">
                                    <div class="item-inner" style="padding: 0;">
                                        <div class="item-title-row" style="padding-right: 0;">
                                            <div class="item-title decter-name-con">
                                                <span class="decter-name">`+common.transNullundefinedToline(datalist[i].fcFacilitiesName)+ `</span>
                                            </div>
                                        </div>
                                        <div class="item-subtitle decter-mesage">` + common.transNullundefined(datalist[i].location) + `</div>
                                        <div class="item-subtitle decter-belong-unit">
                                            ` +  common.transNullundefined(datalist[i].orgName) + `
                                        </div>
                                    </div>
                                    <div class="decter-pic-con" id="dectorImg_`+datalist[i].fcFacilitiesId+`" style="margin-right:16px"></div>
                                    </a>
                                </li>
                                `);
                                jQuery("#SSN"+datalist[i].fcFacilitiesId).off().on("click",{'res':datalist[i]},function(e) {
                                    var $radio = $(this).find("input[type=radio]"),
                                    $flag  = $radio.is(":checked");
                                    if( !$flag ){
                                        $radio.prop("checked",true);   
                                    }else{
                                        $radio.prop("checked",false);
                                    }
                                });
                                //展示图片
                                showImage(jQuery("#dectorImg_"+datalist[i].fcFacilitiesId),JSON.parse(datalist[i].icon).detailIcon,1);
                            }

                            if(userInfor.isMuilUnitUser == 0){
                                jQuery(".decter-belong-unit").hide();
                            }else{
                                //是多联网角色切换到单的
                                if(isChangeUnitRole){
                                    jQuery(".decter-belong-unit").hide();
                                }else{
                                    jQuery(".decter-belong-unit").show();
                                }
                            }
                        }
                    } else {
                        self.allowInfinite=false;
                        $('#history_preloader').hide();
                        if (self.listIndex == 0) { //暂无数据
                            $("#dslist ul").empty();
                            $("#dslist ul").append(`<div class="no-data-img"><img src="`+listNoDataPic()+`"/></div>`);
                        }
                    }
                });
            },
            //选择建筑
            troublebulid: function(){
                var self = this;
                loadSelectBuildFun(self.currentOrgId,function(data){
                    $("#troubleBulid").html(data.buildName);
                    $("#troubleBulid").addClass('select-active');
                    self.chargeBuildId=data.buildId;
                    self.getmoreDectorStateData();
                });
            },
            reInit:function(){
                var self = this;
                self.listIndex = 0;
                $(".page-content").scrollTop(0,300);
                $('#history_preloader').hide();
                $("#historyPolice_list ul").empty();
                if(!self.allowInfinite){
                    self.allowInfinite = true;
                    $('#history_preloader').show();
                }
            },
            removeScreen:function(){
                var self = this;
                jQuery("#troubleBulid").html("全部区域");
                jQuery("#troubleBulid").removeClass('select-active');
                jQuery("#dector_type").html("设备类别");
                jQuery("#dector_type").removeClass('select-active');
                self.chargeBuildId="";
                self.fcfCategoryId="-1"
                self.getmoreDectorStateData();
            },
            clearContent:function() {
                this.listIndex = 0;
                $("#dslist ul").empty();
            },
            equipmentbutton:function(){
                var equipment = document.getElementsByName("relatedEquipment");
                var flagequipment = false
                for(var i=0;i<equipment.length;i++){
                    if(equipment[i].checked){
                        flagequipment = equipment[i];
                        app.router.back();
                        app.view.current.el.f7View.router.currentPageEl.f7Component.receiveEquipment(equipment[i].getAttribute('data-id'), equipment[i].getAttribute('data-name'));
                    }
                }
                if(!flagequipment) {
                    app.methods.showToastCenter("请选择关联设备")
                }
            },
        },

        on: {
            pageInit: function (e, page) {
                let self = this;
                $("#troubleBulid").html(self.buildName);
                $("#troubleBulid").addClass('select-active');
                self.getmoreDectorStateData();
                let selectOptionDecEltype = "";
                let dataType=2;
                //设备类别
                jQuery("#dector_type").click(function(e) {
                    loadSelectDectorFunc(self.currentOrgId,function(data){
                        //选中
                        selectOptionDecEltype = data.type;
                        if(self.selectOptionDec != data.dectorId||dataType!=selectOptionDecEltype){
                            self.selectOptionDec = data.dectorId;
                            if(data.type==1){
                                self.decterSystemId=data.dectorId;
                                self.fcfCategoryId=-1;
                                dataType=1;
                            }else{
                                self.decterSystemId=-1;
                                self.fcfCategoryId=data.dectorId;
                                dataType=2;
                            }
                            jQuery("#dector_type").html(data.dectorName);
                            jQuery("#dector_type").addClass('select-active');

                        } else {
                            self.selectOptionDec = "";
                            self.decterSystemId=-1;
                            self.fcfCategoryId=-1;
                            jQuery("#dector_type").html("设备类别");
                            jQuery("#dector_type").removeClass('select-active');
                        }
                        self.systemId=data.dectorId;
                        self.clearContent();
                        self.getmoreDectorStateData();
                    },false,self.selectOptionDec,selectOptionDecEltype,dataType);
                });
                jQuery("#assets_list_search").keypress(function(e) {
                    let name = jQuery("#assets_list_search").val();
                    if (e.which == 13) {
                        self.selectContent = name;
                        $("#dslist ul").empty();
                        self.listIndex = 0;
                        self.getmoreDectorStateData();
                    };
                });
            },
            pageAfterIn: function (e, page) {
               
            },
        }
    }
</script>
<style>
    .dslist ul:before{
        height: 0;
    }
    .page-title{
        position: absolute;
        margin-top: -30px;
        margin-left: 26px;
        font-size: 17px;
    }
    .unitStat-list-dslist ul:before{
            height: 0 !important;
    }
    .select-option {
        padding: 10px 5px;
        font-size: 12px;
        z-index: 3;
        position: fixed;
        width: 100%;
        margin-top: 48px;
    }
    .item-title span {
        text-overflow: ellipsis;
        white-space: nowrap;
        overflow: hidden;
        font-size: 12px;
    }
    .decter-name{
        font-size: 16px !important;
    }
    .item-inner div{
        line-height: 25px; 
    }
    .assets-status span{
        color: #2471CA;
        padding-right: 10px;
    }
    .media-list{
        margin-top:15px;
    }
    .md .list .item-inner:after{
        height: 0;
    }
    .hwy{
        width: 92%;
        height: 44px !important;
        margin: 0 auto;
        background: linear-gradient(to top, #238afb, #40affe);
        line-height: 0px;
        font-size: 16px;
    }
    .radio_type{
        position: absolute;
        width: 20px;
        height: 20px;
        margin-top: 28px;
        margin-left: 5px;
    }
    .page-title{
        float: left;
        margin-top: 10px;
        font-weight: bold;
        margin-left: 10px;
        font-size: 21px;
    }
    .link-page-search-input{
        margin-top: 10px;
    }
    .item-inner::after{
        display:none !important;
    }
    .rdsp-fix-botttom-page .page-content{
        width: 100%;
        height: calc(88% - 20px);
    }
    .rdsp-fix-botttom-page .media-list{
        margin: 0;
    }
</style>
